<script setup lang="ts">
// 生意参谋 竞争 店铺识别 店铺识别流失/高潜竞店识别

import {getCurrentInstance} from "vue";
import BaseApp from "~/contentScripts/views/sycm/baseApp.vue";
import LostTable from "~/contentScripts/views/sycm/shop_recognition/SycmShopRecognitionIdentify/LostTable.vue";
import PotentialTable
  from "~/contentScripts/views/sycm/shop_recognition/SycmShopRecognitionIdentify/PotentialTable.vue";
import User from "~/contentScripts/views/tao/list/components/user.vue";
import {isLogin} from "~/logic";
import SYCM from "~/utils/ali/sycm";

const loginVisible = ref<Boolean>(false);
const visible = ref<Boolean>(false);
const showZs = ref<Boolean>(false);
const tabState = reactive<any>({
  name: '',
  index: 0,
  data: [],
});
const __option = getCurrentInstance()?.appContext.provides.option;
const handle = async () => {
  if (isLogin({
    emit: () => {
      loginVisible.value = true;
    }
  }, __option)) {
    getTabIndex();
    tabState.data = await SYCM.getInternalFiberData('#drainRecognition > div.oui-card-content > div.sycm-mc-ci-shop-recognition-scatter-wrapper > div > div > div > div.recharts-responsive-container', 'memoizedProps.children._owner.memoizedProps.data[0]');
    visible.value = true;
    console.log(tabState);
  }
}
// 获取当前选中的tab
const getTabIndex = () => {
  const doms: Element[] = document.querySelectorAll("[id^=__qiankun_microapp_wrapper_for_op_mc] div.ebase-FaCommonFilter-module__root div.ebase-FaCommonFilter-module__bottom > div.ebase-FaCommonFilter-module__left span.oui-tab-switch > span.oui-tab-switch-item");
  for (let i = 0; i < doms.length; i++) {
    let dom: Element = doms[i];
    if (dom && dom.getAttribute('class').includes('oui-tab-switch-item-active')) {
      tabState.name = dom.innerHTML.replaceAll(' ', '').replaceAll("\n", '');
      tabState.index = i;
      return;
    }
  }
}
</script>

<template>
  <base-app>
    <a-button-group>
      <user style="margin-right: 0;"/>
      <a-button type="primary" size="small" @click="handle">
        一键转化
      </a-button>
    </a-button-group>
    <user-login-modal v-model:login-visible="loginVisible"/>
    <custom-modal :title="`竞争-竞店识别-${tabState.name}`" width="95%" style="top: 20px;" v-model:open="visible">
      <template #headerRight>
        <SYCMCustomModalHeaderNotice/>
        <a-checkbox style="margin-left: 10px;" v-model:checked="showZs">显示指数</a-checkbox>
      </template>
      <LostTable v-if="tabState.index===0" :table-name="`竞争-竞店识别-${tabState.name}`" :show-zs="showZs"
                 :data="tabState.data"
      />
      <PotentialTable v-else-if="tabState.index===1" :table-name="`竞争-竞店识别-${tabState.name}`" :show-zs="showZs"
                      :data="tabState.data"
      />
    </custom-modal>
  </base-app>
</template>

<style scoped>

</style>
